<template>
  <div>
    <div class="search" style="display:flex;align-items:center;justify-content:space-between;">
      <div>
        <el-input style="width: 300px;" v-model="input" placeholder="请输入订单号"></el-input>
        <el-button type="primary" style="margin-left: 10px;" @click="polling">查询</el-button>
      </div>
      <p style="margin-left:20px;margin-right:50px;font-size:18px;">余额：￥{{balance}}</p>
    </div>
    <div class="orderItem" v-for="item in tableData">
      <div class="top" style="justify-content: space-between;">
        <!-- <p>2020-01-01</p> -->
        <div style="display: flex;">
          <p>小米订单号：{{item.remote_orderno}}</p>
          <p>子订单号：{{item.sub_orderno}}</p>
        </div>
        <div>
          <el-button type="primary" @click="getDetails(item.remote_orderno,item.sub_orderno)">查看详情</el-button>
          <el-button type="primary" v-if="item.status != 2" @click="handleCancel(item.sub_orderno)">取消订单</el-button>
          <span v-if="item.status == 2">已取消</span>
        </div>
      </div>
      <div class="productList">
        <div :class="item.goods_list.length!=undefined&&indexPro+1==item.goods_list.length?'item':'item bottom'" v-for="(itemPro,indexPro) in item.goods_list">
          <img :src="itemPro.goods_img">
          <p>商品名称：{{itemPro.goods_name}}</p>
          <p>数量：{{itemPro.goods_num}}</p>
          <p>单价：{{itemPro.goods_price}}</p>
        </div>
      </div>
    </div>
     <div class="pagination" style="width:100%;display:flex;justify-content:center;">
      <el-pagination
        background
        :page-size="page_size"
        v-if="total>15"
        layout="prev, pager, next"
        :total="total"
        style=""
        @current-change="pageChange">
      </el-pagination>
    </div>
    <el-dialog
    title="订单详情"
    :visible.sync="dialogVisible"
    width="30%"
    >
    <div style="font-size:16px;line-height:30px;">
      <p>小米订单号：{{details.top_order_id}}</p>
      <p>子订单号：{{details.order_id}}</p>
      <p>订单状态：{{details.order_status_desc}}</p>
      <p>订单总额：{{details.goods_amount}}</p>
      <p>下单时间：{{details.add_time}}</p>
      <p>运费：{{details.shipment_expense}}</p>
    </div>
  </el-dialog>
  </div>

</template>

<script>
import { cancel, relation,orderDetails,balance} from '../../../../api/ajax'
export default {
  name: 'allOrder',
  data() {
    return {
      tableData: [],
      input:'',
      dialogVisible:false,
      details:{},
      balance:'',
      page_size: 15,
      page_num: 1,
      total:0
    }
  },
  mounted () {
    this.getList();
    this.getBalance();
  },
  methods: {
    getBalance () {
        balance({}).then(res => {
          if (res.data.code === 1) {
            this.balance = res.data.data.balance
          }
        })
      },
    getDetails(top_order_id,order_id){
      this.dialogVisible = true;
      orderDetails({
        top_order_id:top_order_id,
        order_id:order_id
      }).then(res => {
        console.log(res);
        this.details = res.data.data;
      })
    },
    polling(){
      this.page_num = 1;
      relation({
        curpage: this.page_num,
        order_no:this.input
      }).then(res => {
        this.tableData = res.data.data.list
        this.total = parseInt(res.data.data.total_count);
      })
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    handleView(index, row) {
      console.log(index, row);
    },
    handleCancel(id) {
      console.log(id);
      this.$confirm('此操作将取消订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancel({
          order_id: id
        }).then(res => {
          if (res.data.code) {
            this.getList()
          }
        })
      }).catch(() => {
      });
    },
    pageChange(val){
      console.log(val)
      this.page_num = val;
      this.getList();
    },
    getList () {
      relation({
        curpage: this.page_num,
      }).then(res => {
        this.tableData = res.data.data.list
        this.total = parseInt(res.data.data.total_count);
        console.log(this.total)
      })
    },
  }

}
</script>

<style scoped>
  @import '../../../../assets/style/common.less';
  .search{
    width: 100%;
    border:1px solid #ddd;
    margin: 10px 0;
    padding: 20px;
  }
  .bottom{
    border-bottom: 1px solid #ddd;
  }
  .orderItem{
    width: 100%;
    border: 1px solid #ddd;
    margin-bottom: 30px;
  }
  .orderItem .top{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;
    background: #f2f2f2;
  }
  .orderItem .top p{
    margin-right: 30px;
  }
  .productList{
    padding: 15px;
  }
  .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
  }
  img{
    width: 100px;
    height: 100px;
  }
</style>
